@import '@/styles/color';

.container {
  margin-top: 12px;
  margin-bottom: 0;
  gap: 12px;
  font-size: 14px;

  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .author {
    margin-bottom: 10px;
    line-height: 22px;
    color: @GRAY05;
  }

  .inner-container {
    background-color: @WHITE04;
    padding: 12px 16px;
    border-radius: 10px;

    .think-content {
      position: relative;
      line-height: 28px;
      padding: 12px 15px 12px 23px;
      color: #626b75;
      background-color: #edf0fc;
      word-wrap: break-word;
      word-break: break-all;
      transition: 0.4s background cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 10px;

      &::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background-color: #dfe1e3; /* 竖线颜色 */
        border-radius: 2px;
      }
    }
  }

  .chat-content {
    // display: inline-block;
    // line-height: 28px;
    // color: @GRAY13;
    // word-wrap: break-word;
    // word-break: break-all;

    // &.user {
    //   padding: 10px 16px;
    //   background-color: @WHITE04;
    // }

    // img {
    //   max-width: 100%;
    // }

    // ol {
    //   padding-inline-start: 10px;
    // }

    // pre {
    //   box-sizing: border-box;
    //   white-space: pre-wrap;
    //   word-break: break-word;
    //   background: @BLANK26;
    //   color: @WHITE;
    //   padding: 10px;
    //   border-radius: 10px;
    //   overflow-x: auto;
    // }
    :global {
      .ds-markdown code {
        background: transparent;
      }
    }
  }
}
